const ulNode = document.querySelector(".Carousel ul");
const pointList = document.querySelectorAll('.pointBox li');
let nowIndex = 0;
window.addEventListener("load", async() => {

    let fetchRes = await fetch("http://website.bluej.cn/api/carouselGroup/get?carouselGroupId=473", {
        method: "GET",
        headers: {
            'x-token': "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NDAsImlhdCI6MTY0MjQwOTc4NSwiZXhwIjoxNjQyNDk2MTg1fQ.m-adByt4EiRamgi-Lh0SVR5leACqiwucpCMVYN58D8E",
        }
    });
    console.log(fetchRes);
    let fetchData = await fetchRes.json();
    console.log(fetchData);
    let imgArr = fetchData.data.Carousels;
    //console.log(imgArr);
    // 将URL 单独提取出来，创建一个新的数组
    let urlArr = [];
    imgArr.forEach(item => {

        urlArr.push(item.url);

    });
    //console.log(urlArr);

    //向前端页面渲染图片
    let liStr = " ";
    urlArr.forEach(item => {

        liStr += `<li><img src = "${item}"/></li>`;

    });
    ulNode.innerHTML = liStr;



    //小圆点的点击
    pointList.forEach((item, index) => {
        item.addEventListener("click", () => {
            nowIndex++;
            nowIndex = index;
            if (ulNode.childElementCount == nowIndex) {
                nowIndex = 0;
            } else {
                ulNode.style.transform = `translateX(-${nowIndex}00%)`;
            }

        })
    })

});